<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dog Breed Classification</title>
      <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<script>
    function showloading() {
        image = document.getElementById('loading_image');
        image.style.display = 'inline'
    }
</script>

<style>
    .img_holder img{
        max-width: 100%; max-height: 100%;
    }

    .btn-file {
    position: relative;
    overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }
</style>

<body>
<header class="navbar">


  <h3 style="margin: auto;width: 80%; text-align: center; margin-top: 20px;  text-transform: uppercase">Dog Breed Classificaion</h3>

   <div style="text-align: center; margin-top: 20px">
       <img style="max-width: 600px" src="{{ url_for('static', filename='sample_dog_output.png') }}"/>
   </div>

  <form action="/upload" method="post" enctype="multipart/form-data" style="margin-top: 30px; width: 80%; text-align: center; margin: auto;" onsubmit="showloading()">
      <span class="btn btn-default btn-file">
        Select Image <input type="file" name="image">
    </span><br><br>
        <input type="submit" value="Upload" class="btn btn-primary">
  </form>
    <div style="text-align: center">
        <img id="loading_image" style="display: none" src="{{ url_for('static', filename='loading.gif')}}">
    </div>
</header>

</body>
</html>